<style>
	option.imagebacked {
	padding: 2px 0 5px 30px;
	background-repeat: no-repeat;
	background-position: 1px 2px;
	vertical-align: middle;
}
	
	.actionsDD, .actionsDD ul { 
		list-style: none;
		margin: 0;
		padding: 0;
		position: absolute;
		top:-5px;
		left: 190px;
		background:#9393A0;
	
	}
	.actionsDD{
		z-index: 100;
		position: relative;
	}
	.actionsDD li {
	border: 1px solid #000;
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	position: relative;
	text-decoration: none;
	}
	
	.actionsDD  li:hover {
		background: #FF0000;
		color: #00FF00; 	
	}
	.actionsDD  ul li {
		border: 0;
		float: none;
		padding-right: 20px;
		padding-left: 20px;
		width: 80px;
		white-space: nowrap;		
	}	

</style>

<script type="text/javascript">
<!--
	//$(function() {
	//theres the gallery and the trash
	var $gallery = $( "#gallery" ),$trash = $( "#trash" );
	
	// let the gallery items be draggable
	$( "li", $gallery ).draggable({
		cancel: "a.ui-icon", // clicking an icon wont initiate dragging
		revert: "invalid", // when not dropped, the item will revert back to its initial position
		containment: $( "#demo-frame" ).length ? "#demo-frame" : "document", // stick to demo-frame if present
		helper: "clone"
	});
	
	// let the trash be droppable, accepting the gallery items
	$trash.droppable({
		accept: "#gallery > li",
		drop: function( event, ui ) {
			deleteImage( ui.draggable );
		}
	});
	
	// let the gallery be droppable as well, accepting items from the trash
	$gallery.droppable({
		accept: "#trash li",
		activeClass: "custom-state-active",
		drop: function( event, ui ) {
			recycleImage( ui.draggable );
		}
	});
	
	
	// image deletion function
	var recycle_icon ;
	function deleteImage( $item ) {
		$item.fadeOut(function() {
			var $list = $( "#trash ul", $trash ).length ?
				$( "ul", $trash ) :
				$( "<ul class=\'gallery ui-helper-reset\'/>" ).appendTo( $trash );
	
			$item.find( "a.ui-icon-trash" ).remove();
			$item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
				$item
					.animate({ width: "88px" })
					.find( "img" )
						.animate({ height: "68px" });
			});
		});
	}
	
	// image recycle function
	var trash_icon ;
	function recycleImage( $item ) {
		$item.fadeOut(function() {
			$item
				.find( "a.ui-icon-refresh" )
					.remove()
				.end()
				.css( "width", "96px")
				.append( trash_icon )
				.find( "img" )
					.css( "height", "72px" )
				.end()
				.appendTo( $gallery )
				.fadeIn();
		});
	}
	
	// --On hover show image title
	$( "ul.gallery > li" ).hover(function( event ) {
		var $item = $( this ),
			$target = $( event.target );
			//alert("-- Add Picture Title on Hover -- ");
			//document ("image hovered");
		return false;
	});
		
	//Select the image when clicked.
	 $( "ul.gallery > li" ).click(function( event ) {
		var $item = $( this ),
			$target = $( event.target );
			$item
				.find( "ul.gallery > li" )
				.end().toggleClass("imgSelection");
		return false;
	});
	
	//Hide supported sites textbox display
	$( ".supportedSites" ).hide();
	$( "#uploadStatus" ).hide();
	
	$( "#srcSites").change( function (){
		alert("Source selected: "+this.value);
		});
	
	$( "#destSites").change( function (){
		alert("Destination selected: "+this.value);
	});

	$( ".uploadimg").button();
	$( "#srcActions").hide();
	$( "#tgtActions").hide();
			
	$( ".actions button" ).button({
	        icons: {
	            secondary: "ui-icon-triangle-1-s"
	        }
	});

	
	$( ".actions button[id=\'src_actions\']" ).click(function (){
		//alert("Source Actions clicked. . . . . .");
		$( "#srcActions").stop().toggle();		
		
	});
	
	$( ".actions button[id=\'dest_actions\']" ).click(function (){
		//alert("Destination Actions clicked. . . . . .");
		$( "#tgtActions").stop().toggle();
	});

	
	$( ".uploadimg" ).click(function(){
		$(function() {
			
			$( "#uploadStatus" ).dialog({
				modal: true,
				closeOnEscape: false,
				resizable: false,
				buttons: {
					Cancle: function() {						
						$( this ).dialog( "close" );
					}
				}
			});
		});
    });		


	function preformActionSeletion(value){
		if (value == 'change Title'){
			alert("Action selected"+value);
		}
	}
</script>


<div class="demo ui-widget ui-helper-clearfix " id="mainTab" >


		<div id="srcGalleryView" class="ui-widget-content ui-state-default">
		
			<input type="text" class="supportedSites" name="supportedSites" ng:format="list" value="Facebook, Orkut, Picassa, -- From Angular --, Flicker">		   
			<p class="tabheadingfont">Select source: <select name="srcSites" id="srcSites">
				  	<option ng:repeat="siteName in supportedSites" value={{siteName}} name={{siteName}} class="imagebacked" style="background-image: url(content/images/favicons/facebook.ico);" >{{siteName}}</option>
					</select>
			</p>
			<h4 class="ui-widget-header"><span class="src_logo"><img src="./images/srclogo.jpg">--Type Logo--</span>Currently viewing Album --Album Name -- &nbsp;&nbsp;
				 <a href="home.php"> Change Album</a>
					<span class="actions"><button id="src_actions" type="button"> Actions</button></span>		</h4>
				
						<div id="srcActions" class="actionsDD">
								<ul>
									<li>S_ABCD</li>
									<li>EFGH</li>
								</ul>
						</div>
		
		
		<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix" ng:init='sourceimgs=[{"id":"1","src":"./content/images/high_tatras_min.jpg","title":"The peaks of High Tatras","alt":"The peaks of High Tatras"},
				{"id":"2","src":"./content/images/high_tatras_m2n.jpg","title":"The peaks","alt":"The peaks"}
				]'>
		
				<!-- TODO: Form the below list from Angular  -->
				<li	ng:repeat="sourceimg in sourceimgs" class="ui-widget-content ui-corner-tr">
					<img src={{sourceimg.src}} title={{sourceimg.title}} alt={{sourceimg.alt}} width="96" height="72" />
				</li>
				<li class="ui-widget-content ui-corner-tr">
					<img src="images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" />
				</li>
				
				<!-- <li class="ui-widget-content ui-corner-tr">
					<img src="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72" />
					</li>
				<li class="ui-widget-content ui-corner-tr">
					<img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" />
				</li>
				<li class="ui-widget-content ui-corner-tr">
					<img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" />
				</li>
				<li class="ui-widget-content ui-corner-tr">
					<img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" />
				</li>
				<li class="ui-widget-content ui-corner-tr">
					<img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" />
				</li>
				<li class="ui-widget-content ui-corner-tr">
					<img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" />
				</li>
				<li class="ui-widget-content ui-corner-tr">
					<img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" />
				</li>
				<li class="ui-widget-content ui-corner-tr">
					<img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" />
				</li>
				<li class="ui-widget-content ui-corner-tr">
					<img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" />
				</li>
			 -->
			</ul>
			</div>
	
		<div id="tgtGalleryView" class="ui-widget-content ui-state-default" >
		  <p ng:init='TgtsupportedSites=[{"id":"1","name":"FACEBOOK","sourceURL":"http:\/\/localhost\/PicShare_new\/facebook","faviconlocation":"http:\/\/localhost\/PicShare_new\/content\/images\/favicons\/facebook.ico"},
		  								  {"id":"3","name":"FLICKER","sourceURL":"http:\/\/localhost\/PicShare_new\/flicker","faviconlocation":"http:\/\/localhost\/PicShare_new\/content\/images\/favicons\/flicker.ico"}]'>
		  Select Destination: 
		  	<select name="destSites" id="destSites">
		  		<option ng:repeat="siteName in TgtsupportedSites" value={{siteName.name}} name={{siteName.name}} class="imagebacked" style="background-image: url({{siteName.faviconlocation}});" >{{siteName.name}}</option>
			</select>
		  </p> 
		  
			<h4 class="ui-widget-header"><span class="dest_logo"><img src="./images/srclogo.jpg">FB Logo</span> -- Album Name --  <span class="actions"><button id="dest_actions"> Actions</button></span></h4>
				<div id="tgtActions" class="actionsDD">
						<ul>
							<li onclick="preformActionSeletion('change Title')">Change Title</li>
							<li onclick="preformActionSeletion('change')">Add tags</li>
							<li>Add comment</li>
							<li>Create gallery</li>
							<li>Create Set</li>
							
						</ul>
				</div>
	
		<div id="trash" border="5">
				a
		</div>
			<h4 class="ui-widget-header">--Number-- photos added,--number-- remaining.<button class="uploadimg" type="button">Upload</button></h4>
		</div>
 
</div>
<div id="uploadStatus" title='<img src="./images/process.gif"> Uploading... '> 
	<p> 
		Uploading to selected destination.
	</p> 
	<p> <input type="text" name="percentComplete" value="20">
		<b>{{percentComplete}}% Completed.</b>.
	</p> 
</div>